<template>
  <div class="dashboard-container">
    <el-card>
      <div class="app-container">
        <!-- 新增按钮 -->
        <div class="right">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="$router.push({ path: '/questions/new' })"
            >新增试题</el-button
          >
        </div>
        <!-- 表单部分 -->
        <el-form ref="form" :model="formList" class="demo-form-inline" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="formList.subjectID"
                  placeholder="请选择"
                  @change="changesubject"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="formList.catalogID" placeholder="请选择">
                  <el-option
                    v-for="item in directorysList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="formList.tags" placeholder="请选择">
                  <el-option
                    v-for="item in tagList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="5">
              <el-form-item label="关键字">
                <el-input v-model="formList.keyword" placeholder="根据题干搜索" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="formList.questionType" placeholder="请选择">
                  <el-option
                    v-for="item in questionType"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="formList.difficulty" placeholder="请选择">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="formList.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="formList.creatorID" placeholder="请选择">
                  <el-option
                    v-for="item in creatorList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  />
                </el-select> </el-form-item
            ></el-col>

            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="formList.remarks" />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="企业名称">
                <el-input v-model="formList.shortName" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="城市">
                <el-select v-model="formList.province" placeholder="请选择" @change="changecity">
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-select v-model="formList.city" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <div class="btn">
              <el-button plain @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </div>
          </el-row>
        </el-form>
        <!-- 标签页 -->
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="changeTab">
            <el-tab-pane label="全部" name="null">全部</el-tab-pane>
            <el-tab-pane label="待审核" name="1">待审核</el-tab-pane>
            <el-tab-pane label="已审核" name="2">已审核</el-tab-pane>
            <el-tab-pane label="已拒绝" name="3">已拒绝</el-tab-pane>
          </el-tabs>
        </template>
        <!-- 消息提示的文案 -->
        <el-alert :title="`数据一共${counts}条`" type="info" show-icon />
        <!-- table表格 -->
        <template>
          <el-table :data="listData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="120" />
            <el-table-column prop="subject" label="学科" width="120" />

            <el-table-column prop="catalog" label="目录" width="120" />
            <el-table-column prop="questionType" label="题型" width="100">
              <template #default="{ row }">
                {{ selectype(row.questionType) }}
              </template>
            </el-table-column>

            <el-table-column prop="question" label="题干" width="120">
              <template #default="{ row }">
                <div v-html="row.question" />
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template #default="{ row }">
                {{ formata(row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template #default="{ row }">
                {{ selectdiff(row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120" />
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template #default="{ row }">
                {{ restatus(row.chkState) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120" />
            <el-table-column prop="chkUser" label="审核人" width="120" />
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template #default="{ row }">
                {{ pubtype(row.publishState) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" style="text-aline: center" width="250">
              <template #default="{ row }">
                <!--  :disabled="row.chkState === 0 ? false : true" -->
                <el-button type="text" size="small" @click="yulan(row)">预览 </el-button>

                <el-button
                  type="text"
                  size="small"
                  :disabled="row.chkState === 0 ? false : true"
                  @click="shenhe(row)"
                  >审核</el-button
                >

                <el-button
                  type="text"
                  size="small"
                  :disabled="row.publishState === 1 ? true : false"
                  @click="$router.push({ path: '/questions/new?id=' + row.id })"
                  >修改</el-button
                >

                <el-button type="text" size="small" @click="upDownState(row.id, $event)">
                  {{ row.publishState === 1 ? '下架' : '上架' }}
                </el-button>

                <el-button
                  type="text"
                  size="small"
                  :disabled="row.publishState === 1 ? true : false"
                  @click="del(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页器 -->
        <div class="block">
          <el-pagination
            :page-sizes="[5, 10, 20, 50]"
            :page-size="5"
            layout=" prev, pager, next,sizes, jumper"
            :total="counts"
            @current-change="changePage"
            @size-change="sizeChange"
          />
        </div>
      </div>
    </el-card>
    预览弹框
    <questions-preview :is-dialog="dialog" :info="info" @dialog="closeadd" />
    <!-- <-- 审核弹框 -->
    -->
    <questions-check
      ref="adddia"
      :is-dialog="shhedia"
      :audit-id="auditId"
      @clshdia="clshdia"
      @closeadd="getjxList"
    />
  </div>
</template>

<script>
import { questionType, difficulty, publishType, direction } from '@/api/hmmm/constants.js'
import { choice, remove, choicePublish } from '@/api/hmmm/questions.js'
import { simple as subjectSimple } from '@/api/hmmm/subjects.js'
import { simple as directorysSimple } from '@/api/hmmm/directorys.js'
import { simple as tagsimple } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import questionsCheck from '@/module-hmmm/components/questions-check'
import dayjs from 'dayjs'
export default {
  components: {
    questionsPreview,
    questionsCheck
  },
  data () {
    return {
      activeName: 'null',
      // 审核列表数据
      listData: [],
      params: {
        page: 1,
        pagesize: 5
      },
      // 表单部分
      // 表单选择框双向绑定
      formList: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业名称
        city: '', // 区
        province: ''// 市
      },

      subjectList: [], // 科目下拉列表
      directorysList: [], // 二级目录下拉列表
      tagList: [], // 标签目录
      questionType: questionType, // 题型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      publishType: publishType,
      creatorList: [], // 录入人
      provinces: provinces(), // 市
      citys: [], // 区
      dialog: false, // 预览弹框
      info: {},
      shhedia: false, // 审核弹框
      counts: 0,
      // 精选试题id
      auditId: undefined
    }
  },
  mounted () {
    this.getjxList()
    this.getXKList()
    this.getejList()
    this.getbqList()
  },
  methods: {
    // 获取精选题库列表
    async getjxList () {
      const { data: res } = await choice(this.params)
      // console.log(res)
      this.listData = res.items
      this.counts = res.counts
    },
    // 获取学科下拉列表
    async getXKList () {
      const res = await subjectSimple()
      // console.log(res)
      this.subjectList = res.data
    },
    // 获取二级目录下拉列表
    async getejList () {
      const res = await directorysSimple({ subjectID: this.formList.subjectID })
      // console.log(res)
      this.directorysList = res.data
    },
    // 获取标签下拉列表
    async getbqList () {
      const res = await tagsimple({ subjectID: this.formList.subjectID })
      // console.log(res)
      this.tagList = res.data
    },
    // 改变学科触发change事件
    changesubject () {
      this.formList.catalogID = ''
      this.getejList()
      this.getbqList()
    },
    // 清除功能
    clear () {
      this.formList = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业名称
        city: '', // 区
        province: ''// 市
      }
      this.getjxList()
    },
    // 搜索
    async search () {
      const { data: res } = await choice({ subjectID: this.formList.subjectID })
      this.listData = res.items
    },
    // 城市change事件
    changecity () {
      this.formList.city = ''
      this.citys = citys(this.formList.province)
    },
    // 切换导航栏
    async changeTab (tab, ement) {
      // console.log(tab)
      // console.log(tab, ement)
      this.params.chkState = tab.name
      // console.log(tab.name)
      if (tab.name === 'null') {
        delete this.params.chkState
      }
      await this.getjxList()
    },
    // 分页管理
    changePage (page) {
      this.params.page = page
      this.getjxList()
    },
    // 改变每页条数
    sizeChange (value) {
      // console.log(value)
      this.params.pagesize = value
      this.getjxList()
    },
    // 题型处理
    selectype (type) {
      const map = {}
      questionType.forEach(item => {
        map[item.value] = item.label
      })
      return map[type]
    },
    // 发布状态
    pubtype (stau) {
      const map = {}
      publishType.forEach(item => {
        map[item.value] = item.label
      })
      return map[stau]
    },
    // 难度处理
    selectdiff (diff) {
      const map = {}
      difficulty.forEach(item => {
        map[item.value] = item.label
      })
      return map[diff]
    },
    // 审核状态处理
    restatus (value) {
      const MAP = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝'
      }
      return MAP[value]
    },
    // 格式化时间
    formata (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        // console.log(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getjxList()
      })
    },
    // 父传子打开预览弹框
    yulan (value) {
      this.dialog = true
      this.info = value
    },
    // 子传父关闭弹框
    closeadd () {
      this.dialog = false
    },
    // 审核弹框
    async shenhe (data) {
      // console.log(data)
      this.shhedia = true
      this.auditId = data.id
      // this.$refs.adddia.shform = data
    },
    // 审核弹框关闭
    clshdia () {
      this.shhedia = false
    },
    // 控制上下架
    upDownState (row, e) {
      // console.log(row)
      // 1 上架 0 下架
      // 判断当前标签文字是否为下架，为下架，调接口传参，改变文字，改变，状态
      // console.log(e.target.innerText)
      // console.log(this)
      // 进行下架操作
      this.$confirm(`确认${e.target.innerText}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (e.target.innerText === '下架') {
            // 调接口
            await choicePublish({ id: row, publishState: 0 })
          } else {
            await choicePublish({ id: row, publishState: 1 })
          }
          // 重新渲染
          this.getjxList()
          this.$message({
            type: 'success',
            message: `${e.target.innerText}成功!`
          })
        })
        .catch(() => { })
    }
  }
}
</script>

<style scoped>
.right {
  text-align: right;
  margin-bottom: 10px;
}
.btn {
  text-align: end;
}
.block {
  display: flex;
  justify-content: flex-end;
}
</style>
